<script>
import UniPopup from "@/components/no-mask-popup/uni-popup.vue";
import analysisVideo from "../../analysisVideo.vue";
import closeIcon from "../../../assets/close.png";
import store from "@/store";
import { practiceActionType } from "@/store/modules/practice"
export default {
  name: "answerSheet",
  components: { analysisVideo, UniPopup },
  props: {
    currentQuestionIndex: {
      type: Number,
      default: 0,
    },
  },
  computed: {
    viewAnalysis() {
      return store.getters[practiceActionType.getters.getViewAnalysis];
    },
  },
  data() {
    return {
      closeIcon,
      //题目选项 / 解析
      viewAnalysisToggle: "题目选项",
      lastBtn: "", //用于标识用户点击的上一个按钮，以提供相应的样式效果进行标识，增强用户体验
      currentQuestion: null,
			questionList: [],
			textList: [],
    };
  },
	created() {
		this.questionList = this.parent.questionList;
		this.textList = this.parent.textList;
		this.currentQuestion = this.questionList[this.currentQuestionIndex];
	},
  watch: {
    currentQuestionIndex: {
      handler(val) {
        this.currentQuestion = this.questionList[val];
      },
    },
  },
  methods: {
    open() {
      this.$refs.answerSheet.open();
    },
    //选择了选项
    handleAnswer(mark) {
      this.currentQuestion.userAnswer = mark;
      this.currentQuestion.doRight =
        this.currentQuestion.questionAnswer === mark;
      //自动跳转到下一题
      setTimeout(() => {
        this.nextQuestion();
      }, 500);
    },
    //下一题
    nextQuestion() {
      //判断是否是最后一题
      if (this.currentQuestionIndex === this.questionList.length - 1) return;
      this.lastBtn = "nextQuestion";
      this.$emit("update:currentQuestionIndex", this.currentQuestionIndex + 1);
    },
    //判断该选项是否有选中过
    isOptionHasSelected(mark) {
      for (let item of this.questionList) {
        if (item.userAnswer === mark) {
          return true;
        }
      }
      return false;
    },
  },
  inject: ["root", "parent"],
  emits: ["update:currentQuestionIndex"],
};
</script>

<template>
  <uni-popup
    ref="answerSheet"
    type="bottom"
    :is-mask-click="false"
    mask-background-color="transparent"
  >
    <view class="answer-sheet-content">
      <view class="header">
        <view>
          <!--						查看解析模式：切换题目选项和解析-->
          <view class="tagList" v-if="viewAnalysis">
            <view
              class="tag-item"
              :class="{ active: viewAnalysisToggle === '题目选项' }"
              @click="viewAnalysisToggle = '题目选项'"
              >题目选项
            </view>
            <view
              class="tag-item"
              :class="{ active: viewAnalysisToggle === '解析' }"
              @click="root.checkIsVip() && (viewAnalysisToggle = '解析')"
              >解析
            </view>
          </view>
        </view>
        <image
          class="icon"
          :src="closeIcon"
          @click="$refs.answerSheet.close()"
        ></image>
      </view>
      <view class="content">
        <view class="question-name">
          <!--				题目名称-->
          <view>
            <text>{{ currentQuestion.questionSerialNum }}</text>
            <text>.\t</text>
            <text>{{ currentQuestion.questionName }}</text>
          </view>
        </view>
        <!--				选项列表-->
        <view class="option-list" v-if="!viewAnalysis">
          <view
            class="option-item"
            v-for="item in textList"
            :key="item.mark"
            @click="handleAnswer(item.mark)"
            :class="{
              active: currentQuestion.userAnswer === item.mark,
              hasSelected: isOptionHasSelected(item.mark),
            }"
            >{{ item.mark }}
          </view>
        </view>
        <!--				参考答案-->
        <view class="analysis" v-else>
          <!--				题目名称翻译-->
          <view class="trans" v-if="currentQuestion.trans">
            {{ currentQuestion.trans }}
          </view>
          <!--						题目选项-->
          <template v-if="viewAnalysisToggle === '题目选项'">
            <view class="row">
              <text>你的作答：</text>
              <template v-if="currentQuestion.userAnswer">
                <text>{{ currentQuestion.userAnswer }}</text>
              </template>
              <text v-else>未作答</text>
            </view>
            <view class="row">
              <text>正确答案：</text>
              <text
                :class="
                  currentQuestion.questionAnswer === currentQuestion.userAnswer
                    ? 'correct'
                    : 'incorrect'
                "
              >
                <text>{{ currentQuestion.questionAnswer }}</text>
              </text>
            </view>
          </template>
          <!--						解析-->
          <view style="margin-top: 30rpx" v-else>
            <view
              v-html="currentQuestion.analysis"
              v-if="currentQuestion.analysis"
            ></view>
            <view v-if="currentQuestion.videoUrl" style="margin-top: 20rpx">
              <analysisVideo
                :video-file-url="currentQuestion.videoUrl"
              ></analysisVideo>
            </view>
          </view>
        </view>
      </view>
      <view class="footer">
        <view class="btn" @click="parent.$refs.answerRecord.open(questionList)"
          >题目一览
        </view>
        <view
          class="btn"
          @click="
            lastBtn = 'prevQuestion';
            $emit('update:currentQuestionIndex', currentQuestionIndex - 1);
          "
          :class="[lastBtn === 'prevQuestion' ? 'active' : '']"
          v-if="currentQuestionIndex > 0"
          >上一题
        </view>
        <!--					做第一题时把上一题按钮禁用掉-->
        <view class="btn disable" v-else>上一题</view>
        <view
          class="btn"
          @click="nextQuestion"
          :class="[lastBtn === 'nextQuestion' ? 'active' : '']"
          v-if="currentQuestionIndex < questionList.length - 1"
          >下一题
        </view>
        <!--					最后一道题显示提交按钮-->
        <view class="btn" v-else-if="!viewAnalysis" @click="parent.submit()"
          >完成作答
        </view>
        <view class="btn disable" v-else>下一题</view>
      </view>
    </view>
  </uni-popup>
</template>

<style scoped lang="scss">
.answer-sheet-content {
  background: white;
  border-radius: 60rpx 60rpx 0 0;
  padding: {
    top: 30rpx;
    left: 30rpx;
    right: 30rpx;
  }
  border: 4rpx inset #999999;
  height: 50vh;
  display: flex;
  flex-direction: column;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .tagList {
      display: flex;
      .tag-item {
        font-size: calc(36rpx * var(--font-size-rate));
        color: var(--text-color-light);
        &:not(:first-child) {
          margin-left: 70rpx;
        }
        &.active {
          color: var(--text-color);
          font-weight: bold;
        }
      }
    }
    > .icon {
      width: 60rpx;
      height: 60rpx;
    }
  }
  .content {
    height: 0;
    flex: 1;
    overflow-y: scroll;
    .question-name {
      margin-top: 20rpx;
      font-size: calc(32rpx * var(--font-size-rate));
    }
    .option-list {
      display: flex;
      flex-wrap: wrap;
      .option-item {
        height: 80rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 30rpx;
        //排除行的最后一个
        &:not(:nth-child(5n)) {
          margin-right: 30rpx;
        }
        width: calc((100% - 120rpx) / 5);
        background: var(--gray-background-color);
        border-radius: 40rpx;
        font-size: calc(30rpx * var(--font-size-rate));
				&.hasSelected {
					background: var(--theme-color-light);
				}
        &.active {
          background: var(--subtheme-color);
        }
      }
    }
    > .analysis {
      > .trans {
        color: var(--text-color-light);
				font-size: calc(30rpx * var(--font-size-rate));
      }
      .row {
        font-size: calc(32rpx * var(--font-size-rate));
        line-height: 2;
        margin-top: 10rpx;
        display: flex;
        .part {
          width: 50%;
        }
        .correct {
          color: #1b9b69;
          font-weight: bold;
        }
        .incorrect {
          color: #e94f4f;
          font-weight: bold;
        }
      }
    }
  }
  > .footer {
    display: flex;
    justify-content: space-around;
    padding: 20rpx 0;
    > .btn {
      height: 60rpx;
      display: flex;
      align-items: center;
      border-radius: 40rpx;
      padding: 0 40rpx;
      border: 4rpx solid #999999;
      font-size: calc(30rpx * var(--font-size-rate));
      background: var(--theme-color-light);
      &.disable {
        opacity: 0.5;
      }
      &.active {
        border: 4rpx solid var(--text-color-theme);
      }
    }
  }
}
</style>
